<!--
 * @Descripttion: 淘宝订单系统
 * @version: 2.0
 * @Author: kiming<shufan209@qq.com>
 * @Date: 2023-05-15 21:29:40
 * @LastEditors: kiming<shufan209@qq.com>
 * @LastEditTime: 2023-05-26 11:26:18
-->
<style lang="less">
@import "./index.less";
</style>
<template>
  <div class="360vr" style="width:100%;height:100%;">
    <div id="pano" style="width:100%;height:100%;"></div>
    <!-- 场景 -->
    <div class="theme_content" data-show="0">
      <div class="panos_content">
        <div class="panos_anim panos_move">
          <div class="panos_wrapper">

            <!-- <div class="width-16"></div> -->
            <div v-for="(item, key) in sceneList" :key="key" :data-name="item.name" class="panos_itemActive"
              :class="{ active: key == active_key }" style="margin-left: 16px;" currentitem="false" :title="item.title">
              <div class="panos_img" :style="{ backgroundImage: 'url(' + item.thumburl + ')' }"
                @click="switchScene(item.name,key)">

              </div>
              <div class="panos_name">
                <div class="marquee_default Marquee_fontSize12_1DMqtm panos_name_label">{{ item.title }}</div>
              </div>
            </div>


            <!-- <div class="width-16"></div> -->
            <!-- <div data-name="2099313" class="panos_itemActive " style="margin-left: 16px;" currentitem="false" title="庭院-8-14_Camera002">
              <div class="panos_img"
                style="background-image: url(https://vrimg.3d66.com/vr/thumb/20210814/1875624/thumb.jpg);">
              </div>
              <div class="panos_name">
                <div class="marquee_default Marquee_fontSize12_1DMqtm panos_name_label">
                  庭院-8-14_Camera002</div>
              </div>
            </div> -->

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "@/assets/vr/css/main.css";







export default {
  name: "ddvr",
  data() {
    return {
      sceneList: [],
      active_key: 0

    }
  },
  created() {
  },
  mounted() {
    let othis = this
    embedpano({
      swf: "https://static.3d66.com/vr/js/krpano/tour.swf",
      xml: "http://123.57.243.40/api/xml?id=" + (othis.$route.params.id || 840748),
      target: "pano",
      html5: "auto",
      mobilescale: 1.0,
      passQueryParameters: true,
      wmode: "opaque",
      bgcolor: "#FFFFFF",
      consolelog: true,
      onready(krpano_interface) {

        setTimeout(() => {
          othis.onreadyok(krpano_interface)
        }, 1000);
      }
    });

    // 场景切换
  },
  methods: {
    onreadyok(krpano) {
      let othis = this
      othis.sceneList = krpano.get('scene').getArray()
      othis.sceneList.map((item, index) => {
        item.name = item.name.replace("scene_", "")
      })
      if (window.sessionStorage.getItem('is_reload_for_gyro')) {

      }
      // console.log(krpano.get('scene').getArray())
      // console.log(JSON.parse(JSON.stringify(krpano.get('scene').getArray())))
      /*   othis.sceneList.map((item,index)=>{
          console.log(index)
        }) */

    },
    switchScene(wrapper_active_id,key) {
      this.active_key = key
      let krpano = document.getElementById('krpanoSWFObject');
      // wrapper_active_id = $(this).data('name');

      /**
       * 保存当前场景ID，用于页面通讯,切换场景时，需要更新对应的户型图
       */
      window.sessionStorage.setItem('vr_img_id', wrapper_active_id)
      $('#floorDetailTrigger').trigger('click')



      krpano.call("loadscene('scene_" + wrapper_active_id + "', null, MERGE, get(blendmodes[crossblending].blend))");
      $(".str_move").parent('.marquee_default').liMarquee("destroy");
      if ($(this).find(".marquee_default").text().trim().length > 5) {
        panosNmaeliMarquee();
      }
    }
  }
};
</script>
